/* 动画效果一 */
.ani01 {
  color: #ff0000;
  font-size: 1.5rem;
  /* cursor是鼠标样式 */
  cursor: pointer;
  /* 
    transition是过渡动画，表示元素的css属性变化时不是瞬间完成
    而是慢慢的过渡过去
    参数1：是要过渡效果的css属性，参数2：过渡的时长（秒）
    参数3：是过渡的缓动曲线函数
  */
  transition: font-size 2s ease-in-out;
}

/*
选择器:hover表示当鼠标进入（悬停）在选择器对应的元素上的时候套用样式
:是伪类 例如.abc:hover表示当鼠标进入class="abc"的元素时套用样式
*/
.ani01:hover {
  font-size: 3rem;
}

/* 多重动画 */
.ani02 {
  border: 1px solid #ff00ff;
  padding: 2rem;
  text-align: center;
  font-size: 1.5rem;
  color: #ff0000;
  cursor: pointer;
  /* all表示任何css属性变化都是过渡效果，慎用，效率比较低下 */
  transition: all 2s linear;
}

.ani02:hover {
  color: #0000ff;
  font-size: 3rem;
  /* 边框宽度 */
  border-width: 5px;
}
